<template>
  <div>
    <!-- 头部 -->
    <a-form ref="formRef" :rules="rules" :model="form" :hideRequiredMark="true">
      <a-row>
        <a-col :span="4">
          <a-form-item name="portValue">
            <a-select ref="select" v-model:value="form.userType" @focus="focus" @change="handleChange" placeholder="请选择端口">
              <a-select-option v-for="item in ports" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="5" :offset="1">
          <a-range-picker
            v-model:value="time"
            style="width: 100%"
            :ranges="ranges"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            @change="panelChange"
          />
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item name="status">
            <a-select ref="select" v-model:value="form.status" @focus="focus" @change="handleChange" placeholder="请选择状态">
              <a-select-option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-form-item name="searchCondition">
            <a-input v-model:value="form.searchCondition" placeholder="根据序号、用户名、ID、手机号模糊搜索"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="2"> <a-button type="primary" @click="search" class="d-a-center">搜索</a-button></a-col>
      </a-row>
    </a-form>

    <!-- 列表 -->
    <a-table
      :columns="columns"
      :data-source="list"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :scroll="{ y: 540 }"
    >
      <template #mobile="{ record }">
        <a-tag :color="record.mobile ? '' : 'warning'">{{ record.mobile ? record.mobile : '未填写' }}</a-tag>
      </template>
      <template #img="{ record }">
        <div v-for="item in record.feedbackPic.split(',')" :key="item">
          <img :src="item" alt="" class="img" />
        </div>
      </template>
      <template #status="{ record }">
        <a-tag :color="record.status == 0 ? 'error' : 'success'">{{ record.status == 0 ? '未处理' : '已处理' }}</a-tag>
      </template>
      <template #operation="{ record }">
        <a-button type="link" @click="look(record, record.id)" v-has="{ a: $route, b: 1 }">查看</a-button>
        <a-button type="link" v-if="record.status == 0" @click="deal(record, record.id)" v-has="{ a: $route, b: 2 }">处理</a-button>
      </template>
    </a-table>

    <!-- 查看弹窗 -->
    <a-modal v-if="visible" v-model:visible="visible" title="反馈信息" @ok="handleOk" width="70%" :footer="null">
      <a-row>
        <a-col :span="4" class="title">用户名</a-col>
        <a-col :span="4">
          {{ modalForm.feedbackName || '无' }}
        </a-col>
        <a-col :span="4" :offset="4" class="title">ID</a-col>
        <a-col :span="4">{{ modalForm.feedbackId || '无' }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="title">手机号</a-col>
        <a-col :span="4">
          <a-tag :color="modalForm.mobile ? '' : 'warning'">{{ modalForm.mobile ? modalForm.mobile : '未填写' }}</a-tag>
        </a-col>
        <a-col :span="4" :offset="4" class="title">反馈日期</a-col>
        <a-col :span="4">{{ modalForm.createdAt }}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="title">反馈内容</a-col>
        <a-col :span="20">
          {{ modalForm.content }}
        </a-col>
      </a-row>
      <a-row :offset="10">
        <a-col :span="4" class="title">图片</a-col>
        <a-col :span="4" v-for="item in modalForm.feedbackPic.split(',')" :key="item">
          <a-image :src="item" alt="" />
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="4" class="title">状态</a-col>
        <a-col :span="4">
          <a-tag :color="modalForm.status == 0 ? 'error' : 'success'">{{ modalForm.status == 0 ? '未处理' : '已处理' }}</a-tag></a-col
        >
      </a-row>
      <a-divider></a-divider>
      <a-row>
        <a-col :span="4" :offset="8">
          <a-button type="info" @click="handleOk" class="d-a-center">关闭</a-button>
        </a-col>
        <a-col :span="4" v-if="modalForm.status == 0">
          <a-button type="primary" @click="save" class="d-a-center">处理</a-button>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import { useModal } from '@/hooks'

import { selectAllFeedBack, getOneFeedBack, updateFeedBack } from '@/api/setting/index'
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue'
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined
  },
  setup() {
    const formRef = ref('')
    const form = reactive({})
    const rules = {}
    const data = reactive({
      list: [],
      id: '',
      modalForm: {},
      time: []
    })

    const loading = ref(true) //表格的加载

    const visible = ref(false)

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
      total: 0
    })

    //   端口列表
    const ports = reactive([
      {
        name: '全部',
        id: ''
      },
      {
        name: '用户端',
        id: 2
      },
      {
        name: '护士端',
        id: 1
      }
    ])
    // 状态列表
    const statusList = reactive([
      {
        name: '全部',
        id: ''
      },
      {
        name: '未处理',
        id: 0
      },
      {
        name: '已处理',
        id: 1
      }
    ])

    const showModal = () => {
      visible.value = true
    }

    const handleOk = e => {
      console.log(e)
      visible.value = false
    }

    // 查询
    const search = () => {
      // console.log(form, "表单内容");
      page.current = 1
      init()
    }
    // 选择时间
    const panelChange = (date, dateString) => {
      console.log('选择的时间是', dateString)
      form.startTime = dateString[0]
      form.endTime = dateString[1]
    }

    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        className: 'table',
        align: 'center'
      },
      {
        title: '用户名',
        dataIndex: 'feedbackName',
        className: 'table',
        align: 'center'
      },
      {
        title: 'ID',
        dataIndex: 'feedbackId',
        className: 'table',
        align: 'center'
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'mobile'
        }
      },
      {
        title: '反馈内容',
        dataIndex: 'content',
        className: 'table',
        ellipsis: true,
        align: 'center'
      },
      {
        title: '反馈日期',
        dataIndex: 'createdAt',
        className: 'table',
        sorter: true,
        align: 'center'
      },
      {
        title: '图片',
        dataIndex: 'feedbackPic',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'img'
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }

    // 查看
    const look = (item, id) => {
      data.modalForm = item
      visible.value = true
      data.id = id
    }

    // 处理
    const deal = (item, id) => {
      data.modalForm = item
      visible.value = true
      data.id = id
    }
    const save = () => {
      const { closeModal } = useModal.confirm({
        title: () => '确定已经处理了吗?',
        icon: () => createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          let res = await updateFeedBack(data.id)
          if (res.success) {
            message.success('处理成功')
            visible.value = false
            init()
            closeModal()
          }
        }
      })
    }
    init()

    async function init() {
      data.loading = true
      if (!form.startTime) {
        delete form.startTime
        delete form.endTime
      }
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...form
      }
      let res = await selectAllFeedBack(obj)
      if (res.success) {
        if (res.object) {
          res.object.records.map(el => (el.key = el.id))
          data.list = res.object.records
          page.total = res.object.total
        } else {
          data.list = []
        }
        data.loading = false
      }
    }
    return {
      ...toRefs(data),
      ports,
      formRef,
      form,
      rules,
      columns,
      pagination,
      statusList,
      visible,
      handleTableChange,
      search,
      panelChange,
      deal,
      look,
      showModal,
      handleOk,
      save
    }
  }
}
</script>
<style scoped lang="less">
.img {
  width: 50px;
  height: 50px;
  margin-left: 20px;
}

.title {
  font-weight: bold;
}

.ant-row {
  margin-bottom: 20px;
}
</style>
